<template>
  <el-submenu :index="parentName">
    <template slot="title">
      <i :class="`icon iconfont ${parentItem.meta.icon}`" style="color: rgba(255,255,255,.7)" ></i>
      <span>{{ showTitle(parentItem) }}</span>
    </template>
    <template v-for="item in children">
      <template v-if="item.children && item.children.length === 1">
        <side-menu-item v-if="showChildren(item)" :key="`menu-${item.name}`" :parent-item="item"></side-menu-item>
        <el-menu-item v-else :index="item.children[0].path" :key="`menu-${item.children[0].name}`"><span slot="title">{{ showTitle(item) }}</span></el-menu-item>
      </template>
      <template v-else>
        <side-menu-item v-if="showChildren(item)" :key="`menu-${item.name}`" :parent-item="item"></side-menu-item>
        <el-menu-item v-else :index="resolvePath(item.path)" :key="`menu-${item.name}`"><i :class="`icon iconfont ${item.icon}`" style="color: rgba(255,255,255,.7)" ></i><span slot="title">{{ showTitle(item) }}</span></el-menu-item>
      </template>
    </template>
  </el-submenu>
</template>

<script>
import mixin from './mixin'
import itemMixin from './item-mixin'

export default {
  name: 'SideMenuItem',
  mixins: [ mixin, itemMixin ]
}
</script>